<template>
  <!-- 定期报告审核 -->
  <div class="page-container-padding">
    <div class="query-header">
      <div class="r-space">报告作者</div>
      <div class="r-space">
        <el-select v-model="authorState" size="mini">
          <el-option label="小组人员" value="group" />
          <el-option label="部门人员" value="dept" />
          <el-option label="我的报告" value="own" />
        </el-select>
      </div>
      <div>
        <el-button
          type="primary"
          size="mini"
          :loading="queryLoading"
          @click="btnToQuery"
        >
          查询
        </el-button>
        <el-button
          size="mini"
          :loading="restoreLoading"
          @click="toGetRestoreList"
        >
          回收站
        </el-button>
      </div>
      <span style="margin-left: 16px; color: #ff430d; font-size: 12px">
        审核人显示『-』的是系统搜集上传，『#』的是从系统导出。
      </span>
      <div style="margin-left: auto">
        <span style="font-size: 11px; color: #2566ca">
          批量审核仅针对未审的报告，已审报告需修改请使用表中单条审核功能。
        </span>
        <el-button type="primary" size="mini" @click="toExamineAll(1)">
          全部通过
        </el-button>
        <el-button type="warning" size="mini" @click="toExamineAll(-1)">
          全不通过
        </el-button>
      </div>
    </div>
    <div v-show="!isShowRestore" style="margin-top: 16px">
      <el-table border stripe :data="reportData">
        <el-table-column
          prop="admin_name"
          label="作者"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="file_date"
          label="日期"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="variety_name"
          label="品种"
          width="200"
        ></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip>
          <template #default="scope">
            <div
              style="cursor: pointer; color: #0189ff"
              @click="btnToViewer(scope.row)"
            >
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="examine_text" label="审核状态" width="120">
          <template #default="scope">
            <el-popover
              trigger="hover"
              placement="right-start"
              :content="scope.row.examine_name"
            >
              <div
                slot="reference"
                :class="'examine' + scope.row.examine_state"
              >
                {{ scope.row.examine_text }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="examine_time"
          label="审核时间"
          width="180"
        ></el-table-column>
        <el-table-column label="审核" width="200">
          <template #default="scope">
            <div>
              <el-select
                v-model="scope.row.examine_state"
                size="mini"
                @change="rowExamineChange(scope.row)"
              >
                <el-option label="待审核" :value="0" />
                <el-option label="通过" :value="1" />
                <el-option label="不通过" :value="-1" />
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70" align="center">
          <template slot-scope="scope">
            <i
              class="el-icon-delete-solid"
              style="color: #ff430d; cursor: pointer"
              @click="toDeleteReportFile(scope.row)"
            >
              删除
            </i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 回收站 -->
    <div v-show="isShowRestore" style="margin-top: 16px">
      <el-table border stripe :data="restoreData">
        <el-table-column
          prop="admin_name"
          label="作者"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="file_date"
          label="日期"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="variety_name"
          label="品种"
          width="200"
        ></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip>
          <template #default="scope">
            <div
              style="cursor: pointer; color: #0189ff"
              @click="btnToViewer(scope.row)"
            >
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="examine_text" label="审核状态" width="120">
          <template #default="scope">
            <div :class="'examine' + scope.row.examine_state">
              {{ scope.row.examine_text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="examine_time"
          label="审核时间"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" width="70" align="center">
          <template slot-scope="scope">
            <i
              class="el-icon-delete-solid"
              style="color: #ff430d; cursor: pointer"
              @click="toRestoreReportFile(scope.row)"
            >
              回收
            </i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 8px">
      <el-pagination
        v-if="isShowRestore"
        background
        hide-on-single-page
        :current-page="restorePage"
        :page-size="restorePageSize"
        layout="total, prev, pager, next, jumper"
        :total="restoreTotalCount"
        @current-change="restorePageChanged"
      ></el-pagination>
      <el-pagination
        v-else
        background
        hide-on-single-page
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    GetPeriodicReportFile,
    ExaminePeriodicReportFile,
    DeletePeriodReport,
    RestorePeriodReport,
  } from '@/api/departmentWork/periodReport'
  export default {
    data() {
      return {
        queryLoading: false,
        reportType: 'DAILY',
        authorState: 'group',
        page: 1,
        pageSize: 30,
        reportData: [],
        totalCount: 0,
        isShowRestore: false,
        restoreLoading: false,
        restorePage: 1,
        restorePageSize: 30,
        restoreTotalCount: 0,
        restoreData: [],
      }
    },
    mounted() {
      this.queryReports()
    },
    methods: {
      // 查询报告
      queryReports() {
        this.queryLoading = true
        GetPeriodicReportFile(
          this.reportType,
          this.page,
          this.pageSize,
          this.authorState
        ).then((res) => {
          const data = res.data
          this.reportData = data.data
          this.totalCount = data.total_count
          this.queryLoading = false
        })
      },

      // 查询回收站
      toGetRestoreList() {
        this.restorePage = 1
        this.isShowRestore = true
        this.getRestoreList()
      },

      getRestoreList() {
        this.restoreLoading = true
        RestorePeriodReport(
          this.reportType,
          this.restorePage,
          this.restorePageSize
        ).then((res) => {
          const data = res.data
          this.restoreData = data.data
          this.restoreTotalCount = data.total_count
          this.restoreLoading = false
        })
      },

      // 删除报告
      toDeleteReportFile(row) {
        this.$baseConfirm('确定删除这个报告吗?', '警告', () => {
          DeletePeriodReport(row.id, 1).then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.queryReports()
          })
        })
      },

      // 还原报告
      toRestoreReportFile(row) {
        this.$baseConfirm('确定回收这个报告吗?', '提示', () => {
          DeletePeriodReport(row.id, 0).then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.getRestoreList()
          })
        })
      },

      // 审核报告
      toExamineReport(data) {
        ExaminePeriodicReportFile(data).then((res) => {
          // console.log(res)
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          if (res.code === 200) {
            this.queryReports()
          }
        })
      },

      // 行审核状态变化
      rowExamineChange(row) {
        const exData = [{ rid: row.id, examine_state: row.examine_state }]
        this.toExamineReport(exData)
      },

      // 审核全部
      toExamineAll(state) {
        let exData = []
        this.reportData.forEach((ele) => {
          if (ele.examine_state === 0) {
            exData.push({
              rid: ele.id,
              examine_state: state,
            })
          }
        })
        if (exData.length < 1) {
          this.$baseMessage('没有检测到待审核的报告条目', 'info')
          return
        }
        this.toExamineReport(exData)
      },

      btnToQuery() {
        this.page = 1
        this.isShowRestore = false
        this.queryReports()
      },

      btnToViewer(item) {
        let a = document.createElement('a')
        a.href = item.pdf_file
        a.style.display = 'none'
        a.target = '_blank'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      },

      currentPageChanged(page) {
        this.page = page
        this.queryReports()
      },
      restorePageChanged(page) {
        this.restorePage = page
        this.getRestoreList()
      },
    },
  }
</script>
<style scoped lang="scss">
  .examine1 {
    color: #1ed76d;
    font-weight: 700;
  }
  .examine-1 {
    color: #e61e1d;
    font-weight: 700;
  }
  .query-header {
    display: flex;
    align-items: center;
    .r-space {
      margin-right: 6px;
    }
  }
</style>
